<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    #menu {
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .open {
      max-height: 100px;
    }

    .close {
      max-height: 0;
    }
  </style>
</head>
<body>
<button onclick="handleClick()">Toggle</button>

<ul id="menu" class="open">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<hr>

<script>
  var open = true
  function handleClick() {
    var menu = document.getElementById('menu')
    if (open) {
      menu.classList.remove('open')
      menu.classList.add('close')
    } else {
      menu.classList.remove('close')
      menu.classList.add('open')
    }
    open = !open
    console.log(menu)
  }

  var funTransitionHeight = function (element, time) { // time, 数值，可缺省
    if (typeof window.getComputedStyle == "undefined") return;

    var height = window.getComputedStyle(element).height;

    element.style.transition = "none";    // 本行2015-05-20新增，mac Safari下，貌似auto也会触发transition, 故要none下~

    element.style.height = "auto";
    var targetHeight = window.getComputedStyle(element).height;
    element.style.height = height;
    element.offsetWidth = element.offsetWidth;
    if (time) element.style.transition = "height " + time + "ms";
    element.style.height = targetHeight;
  };

  function setup() {
    var element = document.getElementById('menu')
    if (typeof window.getComputedStyle == 'undefined') return;
    var height = window.getComputedStyle(element)

    console.log(height)
  }

  setup()
</script>
</body>
</html>
